<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.min.css" />
  <script type="text/javascript" src="/assets/js/def.js"></script>
  <script src="/hy5b/t/index.js"></script>
  <script src="/hy5b/t/frontend.js"></script>
  <script src="/hy5b/frontend/datatable/index.js"></script>
  <script type="text/javascript" src="province.js"></script>
  <script type="text/javascript" src="city.js"></script>
  <script src="/assets/lib/underscore/underscore-min.js"></script>
</head>

<body>

  <div id="data"></div>

  <script type="text/javascript">
    var start, end;

    var provinceNames = Object.keys(province)

    _.map(province, (val, key) => {
      console.log(val, city[val])
    })

    var data = []

    var colums = ['id', 'startLon', 'startLat', 'endLon', 'endLat', 'startProvince', 'endProvince', 'startLabel', 'endLabel', 'warnCont', 'linkCount'];

    for (var i = 0; i < 50; i++) {
      start = _.random(34);
      end = _.random(33);
      if (start === end) {
        continue;
      }

      var startCity = province[provinceNames[start]];
      var endCity = province[provinceNames[end]];

      if (!city[startCity] || !city[endCity]) {
        continue;
      }

      data.push(t.genObject(colums, [
        i,
        city[startCity][0],
        city[startCity][1],
        city[endCity][0],
        city[endCity][1],
        provinceNames[start],
        provinceNames[end],
        startCity,
        endCity,
        _.random(1000),
        _.random(200)
      ]));
    }


    var oT = new dataTable();
    oT.setHead(colums)
      .setColumn(colums)
      .render(data, function(sbody, shtml) {
        $("#data").html(shtml);
      });

  </script>
</body>

</html>
